<template>
  <zero-dialog :showDialog.sync="dialog.open" :width="dialog.width" :title="dialog.title"
               :fullscreen.sync="dialog.fullscreen" :id="dialog.id"
               :submit="submitForm">
    <div slot="body">
      <vxe-form :ref="form.ref" :data="form.info" :rules="form.rules" title-align="right" title-width="120" title-colon>
        <vxe-form-item :span="24" v-if="form.info.storageBucket==='image'">
          <template #default>
            <div style="display: flex; justify-content: center; align-items: center;">
              <img v-show="previewUrl"
                   :src="previewUrl"
                   style="width: 100px; height: 100px; object-fit: contain; cursor: pointer;"
                   @click="imageViewerPreview"/>
              <div v-show="!previewUrl"
                   style="width: 100px; height: 100px; display: flex; align-items: center; justify-content: center;">
                <i class="el-icon-loading"></i>
              </div>
              <image-viewer
                  v-if="imageViewerVisible"
                  :urlList="imageUrl"
                  :on-close="onClose"
                  :z-index="2100"
              />
            </div>
          </template>
        </vxe-form-item>
        <vxe-form-item title="文件KEY" :span="24">
          <template #default="{ data }">
            {{ data.fileKey }}
          </template>
        </vxe-form-item>
        <vxe-form-item title="原文件名" :span="24">
          <template #default="{ data }">
            {{ data.fileName }}
          </template>
        </vxe-form-item>

        <vxe-form-item title="文件位置" :span="24">
          <template #default="{ data }">
            /{{ data.storageBucket }}/{{ data.storagePath }}/{{ data.fileMd5 }}
          </template>
        </vxe-form-item>

        <vxe-form-item title="文件大小" :span="24">
          <template #default="{ data }">
            {{ formatFileSize(data.fileSize) }}
          </template>
        </vxe-form-item>

        <vxe-form-item title="是否有预览图" :span="12">
          <template #default="{ data }">
            <dict-tag :options="dictType.whether" :value="data.isPreview"/>
          </template>
        </vxe-form-item>

        <vxe-form-item title="是否私有" :span="12">
          <template #default="{ data }">
            <dict-tag :options="dictType.whether" :value="data.isPrivate"/>
          </template>
        </vxe-form-item>

        <vxe-form-item title="是否分块" :span="12">
          <template #default="{ data }">
            <dict-tag :options="dictType.whether" :value="data.isPart?data.isPart:false"/>
          </template>
        </vxe-form-item>

        <vxe-form-item title="是否上传完成" :span="12">
          <template #default="{ data }">
            <dict-tag :options="dictType.whether" :value="data.isFinished"/>
          </template>
        </vxe-form-item>
      </vxe-form>
    </div>
  </zero-dialog>
</template>

<script>
import addUpdate from '@/mixins/add-update.js';
import ImageViewer from "element-ui/packages/image/src/image-viewer";

export default {
  name: 'addUpdateForm',
  components: {ImageViewer},
  mixins: [addUpdate],

  props: {
    dictType: {
      type: Object
    },
  },
  data() {
    return {
      axios: this.$axiosFile, // 请求的微服务
      imageViewerVisible: false,
      previewUrl: null,
      imageUrl: [], // 新增存储图片URL的数组
      byIdUrl: '/fileMetadataInfo',
      dialog: {
        width: '600px', //定义宽度
      },
    }
  },
  created() {
    this.initDialog = function (params) {
      let row = params.row
      // 先清空所有图片URL
      this.previewUrl = null;
      this.dialog.title = '文件详情'
      this.form.info = row

      // 移到 nextTick 后面确保数据更新完成
      this.$nextTick(() => {
        if (row.storageBucket === 'image') {
          this.preview(row.fileKey)
        }
        this.dialog.open = true
      })
    };
  },
  methods: {
    //缩略图
    async preview(fileKey) {
      try {
        const res = await this.axios({
          url: '/storage/preview/' + fileKey,
          method: 'get',
        });
        this.previewUrl = res.data;
      } catch (error) {
        this.$message.error('获取图片失败');
      }
    },
    async imageViewerPreview() {
      if (this.form.info.storageBucket === 'image') {
        try {
          const res = await this.axios({
            url: '/storage/image/' + this.form.info.fileKey,
            method: 'get',
          });
          this.imageUrl = [res.data];
          this.imageViewerVisible = true;
        } catch (error) {
          this.$message.error('获取图片失败');
        }
      }
    },

    onClose() {
      this.imageViewerVisible = false;
      this.imageUrl = []; // 关闭时清空URL
    },
    // 计算文件大小函数
    formatFileSize(size) {
      if (size < 1024 * 1024) {
        const temp = size / 1024;
        return temp.toFixed(2) + "KB";
      } else if (size < 1024 * 1024 * 1024) {
        const temp = size / (1024 * 1024);
        return temp.toFixed(2) + "MB";
      } else {
        const temp = size / (1024 * 1024 * 1024);
        return temp.toFixed(2) + "GB";
      }
    }
  }
}
</script>
